<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>


    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
          integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">


    <style>


        /*设置页面的盒子让内容和导航栏进行有一定的距离设置*/
        body {
            /*设置上边距*/
            padding-top: 70px;
            /*设置下边距*/
            padding-bottom: 30px;
        }

        .col-md-12{
            padding-right: 800px;
        }

    </style>


</head>
<body>

<!--class="container" 设置左右留白-->
<div class="container">
    <!--row 让里面的表格都放置在同一行-->
    <div class="row">
        <div class="col-md-12">
    <div> <h1>注册页面</h1> </div>
             <form method="post" action="./user.do">
                 <div> <input type="hidden" name="action" value="register"> </div>
                 <div> 会员邮箱:<input type="text" name="email"/></div>
                 <div> 会员名称:<input type="text" name="username"/></div>
                 <div>会员密码:<input type="password" name="password"/></div>
                 <div> 重复密码:<input type="password" name="repassword"/></div>
                 <div>联系电话:<input type="text" name="telephone"/></div>
                 <div>  性别：<input type="radio" name="man" /> 男 <input type="radio" name="girl"/> 女</div>
                 <div>个人介绍:<textarea name="introduce"></textarea></div>
                 <div id="left"> <button class="btn btn-lg btn-primary" type="submit">提交</button>
                      <button class="btn btn-lg btn-primary" type="reset">重置</button>
                      <button class="btn btn-lg btn-primary" type="button">返回</button></div>
</form>
        </div>
      </div>
    </div>



<!-- 1.11.3版本的 jquery.js , bootstrap.min.js 依赖 jquery.js  -->
<script type="text/javascript" src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>


<script>

    $(function () {


      $("button:eq(0)").click(function () {

          //获得邮箱地址值
          var email =$('input[name="email"]').val()
          //获得会员名称值
          var username =$('input[name="username"]').val()
          //获得会员密码值
          var password =$('input[name="password"]').val()
          //获得重复密码值
          var repassword =$('input[name="repassword"]').val()
          //获得联系电话值
          var telephone =$('input[name="telephone"]').val()
          //获得个人介绍值
          var introduce =$('textarea').val()


          //判断邮箱地址是否为空
          if($.trim(email)==''||$.trim(email)=='邮    箱:'||$.trim(email)==null){
              alert('邮箱不能为空！');
              return false;
          }


          //判断会员名称是否为空
          if($.trim(username)==''||$.trim(username)=='会  员  名  称:'||$.trim(username)==null){
              alert('会员名称不能为空！');
              return false;
          }


          //判断会员密码是否为空
          if($.trim(password)==''||$.trim(password)=='会  员  密  码:'||$.trim(password)==null){
              alert('会员密码不能为空！');
              return false;
          }


          //判断重复密码是否为空
          if($.trim(repassword)==''||$.trim(repassword)=='重  复  密  码:'||$.trim(repassword)==null){
              alert('重复密码不能为空！');
              return false;
          }

          //判断联系电话是否为空
          if($.trim(telephone)==''||$.trim(telephone)=='联  系  电  话:'||$.trim(telephone)==null){
              alert('联系电话不能为空！');
              return false;
          }

          //判断个人介绍是否为空
          if($.trim(introduce)==''||$.trim(introduce)==null){
              alert('个人介绍不能为空！');
              return false;
          }




          //验证邮箱格式
          var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
          if(!reg.test(email))
          {
              alert("邮箱格式不对");
              return false;
          }


          //验证会员名称格式
          var usernamereg=/^[a-zA-Z][a-zA-Z0-9_]{4,20}$/
          if(!usernamereg.test(username))
          {
              alert("会员名称不对，要为长度为4-20的大小写字母和数字组成，要以字母开头");
              return false;
          }


          //验证会员密码格式
          var passwordreg=/^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*])[\da-zA-Z~!@#$%^&*]{4,20}$/
          if(!passwordreg.test(password))
          {
              alert("会员密码格式不对，必须包含数字、英文字母、特殊符号且大于4位小于20位");
              return false;
          }



          //验证重复密码是否和会员密码相同
          if (password!=repassword){
              alert("两次输入的密码不相等，请检查后重新输入");
              return false;
          }

          //验证联系电话格式
          var  phonereg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //手机号验证
          if(!phonereg.test(telephone))
          {
              alert("手机号格式错误");
              return false;
          }





      })


    })




</script>

</body>
</html>